<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"/>
		<title>综合模块</title>
		<link rel="stylesheet" type="text/css" href="css/music.css"/>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css"/>
		<script src="jquery/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=x0GG14v1mAVqxkPBjqF8BbzxvujqTZjp"></script>
	</head>
	<body>
		<nav class="navbar navbar-default" role="navigation">
		    <div class="container-fluid"> 
		    <div class="navbar-header">
		        <button type="button" class="navbar-toggle" data-toggle="collapse"data-target="#example-navbar-collapse">
		            <span class="sr-only">切换导航</span>
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		        </button>
		        <a class="navbar-brand" href="#">穿白色衬衣的少年</a>
		    </div>
		    <div class="collapse navbar-collapse" id="example-navbar-collapse">
		       <ul class="nav nav-tabs ">
		       	<li ><a href="index.html"><span class="glyphicon glyphicon-home"></span>首页</a></li>
		       	<li><a href="video.html"><span class="glyphicon glyphicon-film"></span>视频区</a></li>
		       	<li class="active"><a href="music.html"><span class="fa fa-print" aria-hidden="true"></span>综合模块</a></li>
		       	<li><a href="aboutOrarticle.html"><span class="fa fa-book" aria-hidden="true"></span>关于/文章</a></li>
		       </ul>
		    </div>
		    </div>
		</nav>
			<h2 class="text-center">QQ音乐及网易云精彩推荐</h2>
			<div class="carousel slide" id="lunbotu" data-ride="carousel">
				<ol class="carousel-indicators">
					<li data-target="#lunbotu"data-slide-to="0" class="active"></li>
					<li data-target="#lunbotu"data-slide-to="1"></li>
					<li data-target="#lunbotu"data-slide-to="2"></li>
				</ol>
				<div class="carousel-inner">
					<div class="item active">
						<img src="img/QQmusic01.jpg"alt="" class="img-responsive"style="width:100%;">
					</div>
					<div class="item">
						<img src="img/QQmusic02.jpg"alt="" class="img-responsive"style="width:100%;">
					</div>
					<div class="item">
						<img src="img/Webcloud01.jpg"alt="" class="img-responsive"style="width:100%;">
					</div>
				</div>
				  <a class="left carousel-control" href="#lunbotu" role="button" data-slide="prev">
				    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				    <span class="sr-only">Previous</span>
				  </a>
				  <a class="right carousel-control" href="#lunbotu" role="button" data-slide="next">
				  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				   <span class="sr-only">Next</span></a>
			</div>
			<br>
			<div class="container-fluid">
				<div class="panel panel-warning">
					<div class="panel-heading">
						<h2>作者喜欢的一些部分音乐</h2>
					</div>
					<div class="panel-body">
						<div class="container-fluid">
							<div class="row">
								<div class="col-md-3 col-lg-3">
									<div class="thumbnail">
										<a href="#" id="ChasingDreams" ><img src="img/Chasing%20dreams.jpg" ></a>
										<h3>《追梦赤子心》</h3>
										<p>命运他无法让我们跪地求饶！</p>
									</div>
								</div>
								<div class="col-md-3 col-lg-3">
									<div class="thumbnail">
										<a href="#" id="shanzhatree2016"><img src="img/shanzhatree2016.jpg" ></a>
										<h3>《山楂树之恋》</h3>
										<p>我的山楂树之恋只有是和你才会纯洁!</p>
									</div>
								</div>
								<div class="col-md-3 col-lg-3">
									<div class="thumbnail">
										<a href="#"id="huran"><img src="img/huranzhijian.jpg" ></a>
										<h3>《忽然之间》</h3>
										<p>我为什么总在非常脆弱的时候怀念你</p>
									</div>
								</div>
								<div class="col-md-3 col-lg-3">
									<div class="thumbnail">
										<a href="#" id="bi"><img src="img/bici.jpg" ></a>
										<h3>《彼此》</h3>
										<p>愿我能把你面具扯下 痛吧！痛吧！傻瓜</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal fade" id="myModali_one"tabindex="-1"role="dialog"aria-labelledby="myModalLabel" aria-hidden="true"data-backdrop='static'style="width: 100%;">
					<div class="modal-dialog"style="width: 80%;">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button"class="close close1" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h2 class="modal-title text-center" id="myModalLabel">《追梦赤子心》</h2>
							</div>
							<div class="modal-body"class="img-responsive">
								<audio src="Audio/GALA%20-%20追梦赤子心.mp3" class="Dream">
									当前浏览器不支持audio
								</audio>
									<div class="container-fluid">
										<div class="player">
											<div class="Dream_img">
												
											</div>
											<div class="dongtaibian">
												
											</div>
											<i class="fa fa-play-circle play-btn fa-3x" aria-hidden="true"></i>
										</div>
										<div class="time-bar clearfix">
											<span class="text-muted curr-time">00:00</span>
											<span class="text-muted pull-right total-time">05:17</span>
										</div>
										<div class="row">
											<div class="col-md-10 col-lg-10 col-xs-10">
												<div class="progress">
													<div class="progress-bar progress-bar-info" style="width: 0%;"></div>
												</div>
											</div>
											<div class="col-md-2 col-lg-2 col-xs-2">
												<i class="glyphicon glyphicon-volume-up volume"style="color: #000000;"></i>
												<input type="range"class="range" value="100" />
											</div>
										</div>
									</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal fade" id="myModali_two"tabindex="-1"role="dialog"aria-labelledby="myModalLabel" aria-hidden="true"data-backdrop='static'style="width: 100%;">
					<div class="modal-dialog"style="width: 80%;">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button"class="close close2" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h2 class="modal-title text-center" id="myModalLabel">《山楂树之恋》</h2>
							</div>
							<div class="modal-body"class="img-responsive">
								<audio src="Audio/大能人%20-%20山楂树の恋.mp3" class="shanzha" >
									当前浏览器不支持audio
								</audio>
									<div class="container-fluid">
										<div class="player">
											<div class="shanzha_img">
												
											</div>
											<div class="dongtaibian">
												
											</div>
											<i class="fa fa-play-circle play-btn play-btn1 fa-3x" aria-hidden="true"></i>
										</div>
										<div class="time-bar clearfix">
											<span class="text-muted curr-time1">00:00</span>
											<span class="text-muted pull-right total-time1">03:03</span>
										</div>
										<div class="row">
											<div class="col-md-10 col-lg-10 col-xs-10">
												<div class="progress progress1">
													<div class="progress-bar progress-bar1 progress-bar-info" style="width: 0%;"></div>
												</div>
											</div>
											<div class="col-md-2 col-lg-2 col-xs-2">
												<i class="glyphicon glyphicon-volume-up volume volume1"style="color: #000000;"></i>
												<input type="range"class="range range1" value="100" />
											</div>
										</div>
									</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal fade" id="myModali_three"tabindex="-1"role="dialog"aria-labelledby="myModalLabel" aria-hidden="true"data-backdrop='static'style="width: 100%;">
					<div class="modal-dialog"style="width: 80%;">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button"class="close close3" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h2 class="modal-title text-center" id="myModalLabel">《忽然之间》</h2>
							</div>
							<div class="modal-body"class="img-responsive">
								<audio src="Audio/莫文蔚%20-%20忽然之间.mp3" class="huranzhijian" >
									当前浏览器不支持audio
								</audio>
									<div class="container-fluid">
										<div class="player">
											<div class="huran_img">
												
											</div>
											<div class="dongtaibian">
												
											</div>
											<i class="fa fa-play-circle play-btn play-btn2 fa-3x" aria-hidden="true"></i>
										</div>
										<div class="time-bar clearfix">
											<span class="text-muted curr-time2">00:00</span>
											<span class="text-muted pull-right total-time2">03:21</span>
										</div>
										<div class="row">
											<div class="col-md-10 col-lg-10 col-xs-10">
												<div class="progress progress2">
													<div class="progress-bar progress-bar2 progress-bar-info" style="width: 0%;"></div>
												</div>
											</div>
											<div class="col-md-2 col-lg-2 col-xs-2">
												<i class="glyphicon glyphicon-volume-up volume volume2"style="color: #000000;"></i>
												<input type="range"class="range range2" value="100" />
											</div>
										</div>
									</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal fade" id="myModali_four"tabindex="-1"role="dialog"aria-labelledby="myModalLabel" aria-hidden="true"data-backdrop='static'style="width: 100%;">
					<div class="modal-dialog"style="width: 80%;">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button"class="close close4" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h2 class="modal-title text-center" id="myModalLabel">《彼此》</h2>
							</div>
							<div class="modal-body"class="img-responsive">
								<audio src="Audio/蔡维泽%20_%20曾育茗%20-%20彼此%20(Live).mp3" class="bici" >
									当前浏览器不支持audio
								</audio>
									<div class="container-fluid">
										<div class="player">
											<div class="bici_img">
												
											</div>
											<div class="dongtaibian">
												
											</div>
											<i class="fa fa-play-circle play-btn play-btn4 fa-3x" aria-hidden="true"></i>
										</div>
										<div class="time-bar clearfix">
											<span class="text-muted curr-time4">00:00</span>
											<span class="text-muted pull-right total-time4">04:59</span>
										</div>
										<div class="row">
											<div class="col-md-10 col-lg-10 col-xs-10">
												<div class="progress progress4">
													<div class="progress-bar progress-bar4 progress-bar-info" style="width: 0%;"></div>
												</div>
											</div>
											<div class="col-md-2 col-lg-2 col-xs-2">
												<i class="glyphicon glyphicon-volume-up volume volume4"style="color: #000000;"></i>
												<input type="range"class="range range4" value="100" />
											</div>
										</div>
									</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="container">
				<div class="row">
					<div class="page-header">
						<h2>调用百度API实例("我设置定位的是武汉大学")</h2>
					</div>
				</div>
				<div class="row" style="width: 100%;height: 100%;">
					<div class="col-md-12" id="allmap">;
						
					</div>
				</div>
			</div>
			<br>
			<div class="container"style="margin-bottom: 0;padding-top: 100px;">
				<div class="row">
					<div class="col-md-12 text-center">
						<p>穿白色衬衣少年的个人网站&copy;个人邮箱：m78lixingyun@gmail.com</p>
					</div>
				</div>
			</div>
			<script type="text/javascript">
			var map = new BMapGL.Map("allmap");
			map.centerAndZoom(new BMapGL.Point(114.363459,30.545056), 19);
			map.enableScrollWheelZoom(true);
			map.setHeading(64.5);
			map.setTilt(73);
				$('#lunbotu').carousel({
				    interval: 3000
				})
				$('#ChasingDreams').click(function(){
					$('#myModali_one').modal('show');
					musicPlayer();
				})
				$('#shanzhatree2016').click(function(){
					$('#myModali_two').modal('show');
					musicPlayer1();
				})
				$('#huran').click(function(){
					$('#myModali_three').modal('show');
					musicPlayer2();
				})
				$('#bi').click(function(){
					$('#myModali_four').modal('show');
					musicPlayer3();
				})
				function musicPlayer(){
					//获取对应的dom元素
					//获取播放按钮
					var playBtn=document.querySelector('.play-btn');
					//获取audio的dom对象
					var Dream=document.querySelector('.Dream');
					//获取进度条的Dom对象
					var progress=document.querySelector('.progress');
					var progressBar=document.querySelector('.progress-bar');
					//获取总时长的显示区域的dom对象
					var totalTime=document.querySelector('.total-time');
					var currentTime=document.querySelector('.curr-time');
					//获取音量的dom对象
					var range=document.querySelector('.range');
					range.addEventListener('change',function(){
						var volume=this.value/100;
						Dream.volume=volume;
					})
					//获取音量图标的dom对象
					var volume=document.querySelector('.volume');
					volume.addEventListener('click',function(){
						if(this.classList.contains('glyphicon-volume-up')){
							this.classList.remove('glyphicon-volume-up');
							this.classList.add('glyphicon-volume-off');
							range.value=0;
							Dream.volume=0;
						}else{
							this.classList.remove('glyphicon-volume-off');
							this.classList.add('glyphicon-volume-up');
							range.value=100;
							Dream.volume=1;
						}
					})
					//实现跳播功能
					progress.addEventListener('click',function(event){
						//鼠标点击的坐标
						var offsetX=event.offsetX;
						var width=this.offsetWidth;
						console.log(offsetX,width);
						var percent=offsetX/width;
						var currTime=Dream.duration*percent;
						console.log(currTime);
						Dream.currentTime = currTime;
					});
					//注册点击的事件,控制播放器按钮的切换
					playBtn.addEventListener('click',function(){
						if(this.classList.contains('fa-play-circle')){
							//当前是暂停状态
							this.classList.remove('fa-play-circle');
							this.classList.add('fa-pause-circle');
							Dream.play();
							//获取图片的dom对象
							var Dream_img=document.querySelector('.Dream_img');
							Dream_img.style.animation="dongtai 20s linear backwards infinite";
							//获取动态边的dom对象
							var dongtaibian=document.querySelector('.dongtaibian');
							dongtaibian.style.animation="dongtaibian 2s ease-in backwards infinite";
						}
						else{
							//当前是播放状态
							this.classList.remove('fa-pause-circle');
							this.classList.add('fa-play-circle');
							Dream.pause();
							var Dream_img=document.querySelector('.Dream_img')
							Dream_img.style.animation="none";
							var dongtaibian=document.querySelector('.dongtaibian');
							dongtaibian.style.animation="none";
						}
					});
					//获取关闭按钮图标
					var close1=document.querySelector('.close1');
					close1.addEventListener('click',function(){
						Dream.pause();
					})
					//监听音频是否可以播放
					Dream.addEventListener('canplay',function(){
						var duration=timeFmt(Dream.duration);
						// console.log(duration);
						totalTime.innerHTML=duration;
					});
					//监听audio的播放事件
					Dream.addEventListener('timeupdate',function(){
						// console.log('timeupdate');
						//获取当前已播放的时长
						var currTime=Dream.currentTime;
						var duration=Dream.duration;
						var percent=(currTime/duration*100)+'%';
						//控制播放进度条
						progressBar.style.width=percent;
						//显示已播放的时长
						currentTime.innerHTML=timeFmt(currTime);
					});
					//格式化时间
					function timeFmt(s){
						var minute=parseInt(s/60);
						var second=parseInt(s%60);
						minute=minute>10?minute:'0'+minute;
						second=second>10?second:'0'+second;
						return minute+':'+second;
					}
				}
				function musicPlayer1(){
					//获取对应的dom元素
					//获取播放按钮
					var playBtn1=document.querySelector('.play-btn1');
					//获取audio的dom对象
					var shanzha=document.querySelector('.shanzha');
					//获取进度条的Dom对象
					var progress1=document.querySelector('.progress1');
					var progressBar1=document.querySelector('.progress-bar1');
					//获取总时长的显示区域的dom对象
					var totalTime1=document.querySelector('.total-time1');
					var currentTime1=document.querySelector('.curr-time1');
					//获取音量的dom对象
					var range1=document.querySelector('.range1');
					range1.addEventListener('change',function(){
						var volume=this.value/100;
						shanzha.volume=volume;
					})
					//获取音量图标的dom对象
					var volume1=document.querySelector('.volume1');
					volume1.addEventListener('click',function(){
						if(this.classList.contains('glyphicon-volume-up')){
							this.classList.remove('glyphicon-volume-up');
							this.classList.add('glyphicon-volume-off');
							range1.value=0;
							shanzha.volume=0;
						}else{
							this.classList.remove('glyphicon-volume-off');
							this.classList.add('glyphicon-volume-up');
							range1.value=100;
							shanzha.volume=1;
						}
					})
					//实现跳播功能
					progress1.addEventListener('click',function(event){
						//鼠标点击的坐标
						var offsetX=event.offsetX;
						var width=this.offsetWidth;
						console.log(offsetX,width);
						var percent=offsetX/width;
						var currTime=shanzha.duration*percent;
						console.log(currTime);
						shanzha.currentTime = currTime;
					});
					//注册点击的事件,控制播放器按钮的切换
					playBtn1.addEventListener('click',function(){
						if(this.classList.contains('fa-play-circle')){
							//当前是暂停状态
							this.classList.remove('fa-play-circle');
							this.classList.add('fa-pause-circle');
							shanzha.play();
							//获取图片的dom对象
							var shanzha_img=document.querySelector('.shanzha_img');
							shanzha_img.style.animation="dongtai 20s linear backwards infinite";
							//获取动态边的dom对象
							var dongtaibian=document.querySelector('.dongtaibian');
							dongtaibian.style.animation="dongtaibian 2s ease-in backwards infinite";
						}
						else{
							//当前是播放状态
							this.classList.remove('fa-pause-circle');
							this.classList.add('fa-play-circle');
							shanzha.pause();
							var shanzha_img=document.querySelector('.shanzha_img')
							shanzha_img.style.animation="none";
							var dongtaibian=document.querySelector('.dongtaibian');
							dongtaibian.style.animation="none";
						}
					});
					//获取关闭按钮图标
					var close2=document.querySelector('.close2');
					close2.addEventListener('click',function(){
						shanzha.pause();
						//获取图片的dom对象
						var shanzha_img=document.querySelector('.shanzha_img');
						shanzha_img.style.animation="dongtai 20s linear backwards infinite";
						//获取动态边的dom对象
						var dongtaibian=document.querySelector('.dongtaibian');
						dongtaibian.style.animation="dongtaibian 2s ease-in backwards infinite";
						
					})
					//监听音频是否可以播放
					shanzha.addEventListener('canplay',function(){
						var duration=timeFmt1(shanzha.duration);
						// console.log(duration);
						totalTime1.innerHTML=duration;
					});
					//监听audio的播放事件
					shanzha.addEventListener('timeupdate',function(){
						// console.log('timeupdate');
						//获取当前已播放的时长
						var currTime1=shanzha.currentTime;
						var duration=shanzha.duration;
						var percent=(currTime1/duration*100)+'%';
						//控制播放进度条
						progressBar1.style.width=percent;
						//显示已播放的时长
						currentTime1.innerHTML=timeFmt1(currTime1);
					});
					//格式化时间
					function timeFmt1(s){
						var minute=parseInt(s/60);
						var second=parseInt(s%60);
						minute=minute>10?minute:'0'+minute;
						second=second>10?second:'0'+second;
						return minute+':'+second;
					}
				}
				function musicPlayer2(){
					//获取对应的dom元素
					//获取播放按钮
					var playBtn2=document.querySelector('.play-btn2');
					//获取audio的dom对象
					var huranzhijian=document.querySelector('.huranzhijian');
					//获取进度条的Dom对象
					var progress2=document.querySelector('.progress2');
					var progressBar2=document.querySelector('.progress-bar2');
					//获取总时长的显示区域的dom对象
					var totalTime2=document.querySelector('.total-time2');
					var currentTime2=document.querySelector('.curr-time2');
					//获取音量的dom对象
					var range2=document.querySelector('.range2');
					range2.addEventListener('change',function(){
						var volume=this.value/100;
						huranzhijian.volume=volume;
					})
					//获取音量图标的dom对象
					var volume2=document.querySelector('.volume2');
					volume2.addEventListener('click',function(){
						if(this.classList.contains('glyphicon-volume-up')){
							this.classList.remove('glyphicon-volume-up');
							this.classList.add('glyphicon-volume-off');
							range2.value=0;
							huranzhijian.volume2=0;
						}else{
							this.classList.remove('glyphicon-volume-off');
							this.classList.add('glyphicon-volume-up');
							range2.value=100;
							huranzhijian.volume2=1;
						}
					})
					//实现跳播功能
					progress2.addEventListener('click',function(event){
						//鼠标点击的坐标
						var offsetX=event.offsetX;
						var width=this.offsetWidth;
						console.log(offsetX,width);
						var percent=offsetX/width;
						var currTime=huranzhijian.duration*percent;
						console.log(currTime);
						huranzhijian.currentTime = currTime;
					});
					//注册点击的事件,控制播放器按钮的切换
					playBtn2.addEventListener('click',function(){
						if(this.classList.contains('fa-play-circle')){
							//当前是暂停状态
							this.classList.remove('fa-play-circle');
							this.classList.add('fa-pause-circle');
							huranzhijian.play();
							//获取图片的dom对象
							var huran_img=document.querySelector('.huran_img');
							huran_img.style.animation="dongtai 20s linear backwards infinite";
							//获取动态边的dom对象
							var dongtaibian=document.querySelector('.dongtaibian');
							dongtaibian.style.animation="dongtaibian 2s ease-in backwards infinite";
						}
						else{
							//当前是播放状态
							this.classList.remove('fa-pause-circle');
							this.classList.add('fa-play-circle');
							huranzhijian.pause();
							var huran_img=document.querySelector('huran_img')
							huran_img.style.animation="none";
							var dongtaibian=document.querySelector('.dongtaibian');
							dongtaibian.style.animation="none";
						}
					});
					//获取关闭按钮图标
					var close2=document.querySelector('.close1');
					close2.addEventListener('click',function(){
						huranzhijian.pause();
					})
					//监听音频是否可以播放
					huranzhijian.addEventListener('canplay',function(){
						var duration=timeFmt(huranzhijian.duration);
						// console.log(duration);
						totalTime2.innerHTML=duration;
					});
					//监听audio的播放事件
					huranzhijian.addEventListener('timeupdate',function(){
						// console.log('timeupdate');
						//获取当前已播放的时长
						var currTime2=huranzhijian.currentTime;
						var duration=huranzhijian.duration;
						var percent=(currTime2/duration*100)+'%';
						//控制播放进度条
						progressBar2.style.width=percent;
						//显示已播放的时长
						currentTime2.innerHTML=timeFmt(currTime2);
					});
					//格式化时间
					function timeFmt(s){
						var minute=parseInt(s/60);
						var second=parseInt(s%60);
						minute=minute>10?minute:'0'+minute;
						second=second>10?second:'0'+second;
						return minute+':'+second;
					}
				}
				function musicPlayer3(){
					//获取对应的dom元素
					//获取播放按钮
					var playBtn4=document.querySelector('.play-btn4');
					//获取audio的dom对象
					var bici=document.querySelector('.bici');
					//获取进度条的Dom对象
					var progress4=document.querySelector('.progress4');
					var progressBar4=document.querySelector('.progress-bar4');
					//获取总时长的显示区域的dom对象
					var totalTime4=document.querySelector('.total-time4');
					var currentTime4=document.querySelector('.curr-time4');
					//获取音量的dom对象
					var range4=document.querySelector('.range4');
					range4.addEventListener('change',function(){
						var volume=this.value/100;
						bici.volume=volume;
					})
					
					//获取音量图标的dom对象
					var volume4=document.querySelector('.volume4');
					volume4.addEventListener('click',function(){
						if(this.classList.contains('glyphicon-volume-up')){
							this.classList.remove('glyphicon-volume-up');
							this.classList.add('glyphicon-volume-off');
							range4.value=0;
							bici.volume=0;
						}else{
							this.classList.remove('glyphicon-volume-off');
							this.classList.add('glyphicon-volume-up');
							range4.value=100;
							bici.volume=1;
						}
					})
					//实现跳播功能
					progress4.addEventListener('click',function(event){
						//鼠标点击的坐标
						var offsetX=event.offsetX;
						var width=this.offsetWidth;
						console.log(offsetX,width);
						var percent=offsetX/width;
						var currTime=bici.duration*percent;
						console.log(currTime);
						bici.currentTime = currTime;
					});
					//注册点击的事件,控制播放器按钮的切换
					playBtn4.addEventListener('click',function(){
						if(this.classList.contains('fa-play-circle')){
							//当前是暂停状态
							this.classList.remove('fa-play-circle');
							this.classList.add('fa-pause-circle');
							bici.play();
							//获取图片的dom对象
							var bici_img=document.querySelector('.bici_img');
							bici_img.style.animation="dongtai 20s linear backwards infinite";
							//获取动态边的dom对象
							var dongtaibian=document.querySelector('.dongtaibian');
							dongtaibian.style.animation="dongtaibian 2s ease-in backwards infinite";
						}
						else{
							//当前是播放状态
							this.classList.remove('fa-pause-circle');
							this.classList.add('fa-play-circle');
							bici.pause();
							var bici_img=document.querySelector('.bici_img')
							bici_img.style.animation="none";
							var dongtaibian=document.querySelector('.dongtaibian');
							dongtaibian.style.animation="none";
						}
					});
					//获取关闭按钮图标
					var close4=document.querySelector('.close4');
					close4.addEventListener('click',function(){
						bici.pause();
					})
					//监听音频是否可以播放
					bici.addEventListener('canplay',function(){
						var duration=timeFmt(bici.duration);
						// console.log(duration);
						totalTime4.innerHTML=duration;
					});
					
					//监听audio的播放事件
					bici.addEventListener('timeupdate',function(){
						// console.log('timeupdate');
						//获取当前已播放的时长
						var currTime4=bici.currentTime;
						var duration=bici.duration;
						var percent=(currTime4/duration*100)+'%';
						//控制播放进度条
						progressBar4.style.width=percent;
						//显示已播放的时长
						currentTime4.innerHTML=timeFmt(currTime4);
						
					});
					//格式化时间
					function timeFmt(s){
						var minute=parseInt(s/60);
						var second=parseInt(s%60);
						minute=minute>10?minute:'0'+minute;
						second=second>10?second:'0'+second;
						return minute+':'+second;
					}
				}
			</script>
		
	</body>
</html>
